<template @getData='getData'>
<div class="home">
  <div class="context">
    <div class="searchs">
        <el-input placeholder="请输入内容" v-model="inputContent" class="input-with-select">
    <el-button slot="append" icon="el-icon-search"  @click="getData"></el-button>
  </el-input>
    </div>
    <div class="header">
    <div class="header_a">
    <el-tag class="h_a"><i class="el-icon-s-promotion"></i>搜索</el-tag>
    <span class="h_a">你想知道什么？就来找‘我’！</span>
    <span class="h_b"><i class="el-icon-edit-outline"></i>帖子数量:{{totle}}</span>
    </div>
   <el-tabs type="border-card"  v-model="activeName" @tab-click="handleClick">
  <el-tab-pane name="all">
    <span slot="label"><i class="el-icon-menu"></i> 全部</span>
    <div class="c_item" v-for="item in listDate">
        <div class="c_it_content">
             <div class="avatars">
                 <div class="av_h">
            <el-avatar  size="large" :src="item.imgUrl">
             </el-avatar>
                 </div>
             </div>
        <div class="avatars"> 
        <div class="span"  @click="btnhead(item.inviteCode)"><span>{{item.inviteTitle}}</span></div>
        <div class="b"><span> <el-tag  size="small">{{item.type}}</el-tag></span>
                    <span>创建时间：{{item.bytime}}</span>
        </div>
       
    </div>
        </div>
        <div class="c_item_right">
            <span><i class="el-icon-chat-round"></i>{{item.pinglunNum}}</span>
        </div>
    </div>
  </el-tab-pane>

</el-tabs>
  </div>
    </div>
</div>
</template>
<script>
import API from '@/api/cate.js'
export default {
name:'tu7',
data(){
    return{
         listDate:[{imgUrl:"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
            ,inviteTitle:'时间或多或少的就是大就开始打瞌睡家说的就是大家'
            ,pinglunNum:8000,
            bytime:''},
            
            ],
        listDate1:[],
        listDate2:[],
         activeName: 'all',
          pageNum:1,
            pageSize:14,
            totle:1000,
            inputContent:''
    }
}, activated: function() {
    this.inputContent=this.$route.query.inputContent;
    this.getData()
},methods:{
getData(){
        console.log("===");
        this.loading.startLoading();
         let obj1={
              "inviteTitle":this.inputContent
        }
        //模块1
         this.$axios
            .post(API.getInvitaList, obj1)
            .then(res => {
              if (res.data.responseCode === 200) {   
                //   console.log(res.data.data.list);
                  this.listDate=res.data.data.list;
                  this.totle=res.data.data.total
              } else {
                 this.$message.error('查询失败失败');
                //  res.data.data.list
              }
            });
             this.loading.endLoading();
       
    },
     btnhead(val){
        console.log(val);
        // this.$router.go(0)
        this.$router.replace({path:'/contents',
        query:{
          inviteCode:val
          }})
      },
    handleClick(tab, event) { 
   

    }
}
}
</script>
<style scoped>
    .home{
         background-image: url(http://127.0.0.1:9999/1575334078598.jpg);
        /* background: #ccc; */
    width: 100%;
    height: 700px;
    text-align: center;
    margin: 0 auto;
     overflow: auto;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .context{
    padding: 20px;
    background: #fff;
    padding-top: 20px;
    width: 80%;
    margin: 0 auto;
}
.searchs{
    width: 100%;
    height: 50px;
}
.header_a{
    width: 100%;
    height: 40px;
    line-height: 40px;
}
.h_a{
    float: left;
    margin-right: 10px;
    color: rgb(38, 177, 241);
    cursor: pointer;
}
.h_b{
    float: right;
    margin-right: 10px;
    font-size: 12px;
     color: rgb(38, 177, 241);
}
.c_item{
    width: 100%;
    height: 70px;
    float: left;
    margin: 0 auto;
    border-bottom: 1px solid #ccc
}
.c_it_content{
    width: 50%;
    float: left;
}
.avatars{
    margin-right: 15px;
    height: 60px;
    line-height: 30px;
    float: left;
}
.avatars .av_h{
    padding-top: 10px;
}
.avatars .span{
    height: 50%;
    padding-left: 5px;
    width: 280px;
    text-align: left;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.avatars .b{
    height: 50%;
    color: rgb(250, 224, 191);
    padding-left: 5px;
    width: 280px;
    text-align: left;
    font-size: 10px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.c_item_right{
    height: 70px;
    line-height: 70px;
    float: right;
}

</style>
<style>

</style>